<template>
  <div class="barter-container">
    <the-header-top></the-header-top>
    <logo-bar></logo-bar>
    <div class="logistics-body">
      <!--面包屑-->
      <v-breadcrumb :breadcrumb="breadcrumb"></v-breadcrumb>
      <div class="wrapContent">
        <v-title>{{ $t('message.PersonalOrderSaleProgress') }}</v-title>
        <!--进度条-->
        <div class="returns-info">
          <v-progress-bar :length="progressLength" :active="progressState"></v-progress-bar>
          <div class="step-list">
            <ul v-if="orderDetails.order_status === 18 && changeStep === 0" style="width: 600px">
              <!--<li>买家申请换货</li>
              <li>换货申请审核不通过</li>
              <li>换货申请关闭</li>-->
              <li>{{ $t('message.buyerApplyBarter') }}</li>
              <li>{{ $t('message.barterApplyNoPass') }}</li>
              <li>{{ $t('message.barterApplyClose') }}</li>
            </ul>
            <ul v-else-if="orderDetails.order_status === 25 && changeStep === 0" style="width: 600px">
              <!--<li>买家申请换货</li>
              <li>换货订单超时</li>
              <li>换货申请关闭</li>-->
              <li>{{ $t('message.buyerApplyBarter') }}</li>
              <li>{{ $t('message.barterApplyTimeOut') }}</li>
              <li>{{ $t('message.barterApplyClose') }}</li>
            </ul>
            <ul v-else>
              <!--<li>买家申请换货</li>
              <li>商城处理换货申请</li>
              <li>买家退回货物</li>
              <li>商城重新发货</li>
              <li>换货成功</li>-->
              <li>{{ $t('message.buyerApplyBarter') }}</li>
              <li>{{ $t('message.disposeBarterApply') }}</li>
              <li>{{ $t('message.buyerReturnGoods') }}</li>
              <li>{{ $t('message.disposeAnewShipments') }}</li>
              <li>{{ $t('message.barterSuccess') }}</li>
            </ul>
          </div>
        </div>
        <div class="returns-content">
          <div class="returns-content-left" v-if="state === 1">
            <div class="returns-tips">
              <!--<p>注意：非商品质量问题和人为损坏，不允许换货</p>-->
              <p>{{ $t('message.barterTips1') }}</p>
            </div>
            <div class="return-center">
              <!--<div class="refund">-->
                <!--<label>{{ $t('message.returnMoney') }}:</label>-->
                <!--<span>{{ $t('message.currencySymbol') }}{{ orderDetails.refund }}</span><span>({{ $t('message.returnTips2') }})</span>-->
              <!--</div>-->
              <div class="return-cause">
                <!--<label for="returnCause">换货原因:</label>-->
                <label for="returnCause">{{ $t('message.barterCause')}}:</label>
                <!--<label for="returnCause">{{ $t('message.barterCause1')}}</label><br>-->
                <!--<label for="returnCause">{{ $t('message.barterCause2')}}</label>-->
                <textarea name="" maxlength="500" id="returnCause" v-model.trim="returnsTxt" cols="30" rows="10" :placeholder="this.$t('message.inputWriteBarterCause')"></textarea>
                <p class="txtTip"><span :class="{warnTxt: this.returnsTxt.length >= 490}" v-text="txtTip"></span>/500</p>
              </div>
              <div class="uploading padding-top-40">
                <label>{{ $t('message.uploadPhoto') }}:</label>
                <div class="all-content">
                  <div class="returns-upload-image" @mouseover="showImageCover(index)"
                       @mouseleave="hideImageCover(index)" v-show="uploadImages" v-for="(item, index) in uploadImages" :key="index">
                    <div :style="{ background: 'url(' + item + ') no-repeat center / contain', width: '100%', height: '100%'}"></div>
                    <div v-show="index === nowIndex" style="z-index:3">
                      <img src="../../../assets/images/register/icon_delPhoto.png" @click="deleteImg(index)"/>
                    </div>
                  </div>
                  <div class="returns-upload-loading" v-if="loading"></div>
                  <div v-if="isShowSelectBtn" class="all-content-upload" style="vertical-align:top">
                    <div class="returns-upload-btn">
                      <div class="returns-upload-plus" @click="triggerUpload">
                        <div class="add-row-icon"></div>
                        <div class="add-column-icon"></div>
                      </div>
                      <input type="file" ref="uploadFile" v-show="false" @change="onFileChange"/>
                    </div>
                    <p>{{ $t('message.maxFive') }}</p>
                  </div>
                </div>
                <div class="error-tips" v-if="checkImgError">
                  {{ checkImgErrorTxt }}
                </div>
              </div>
              <div class="apply-btn">
                <button @click="submitReturnApply" :disabled="isDisabledSubmit">{{ $t('message.submitApply') }}</button>
              </div>
            </div>
          </div>
          <div class="returns-content-left" v-if="state === 2 || state === 5 || state === 7">
            <!--退货原因的状态栏-->
            <div class="returns-tips">
              <!--<p v-if="state === 2">商城审核换货申请中，大约需要3个工作日</p>
              <p v-if="state === 5">换货申请未通过，原因：{{ userInputMsg.refusal_reason }}</p>
              <p v-if="state === 7">换货订单已关闭，原因：用户未能及时寄回商品</p>-->
              <p v-if="state === 2">{{ $t('message.barterTips2') }}</p>
              <p v-if="state === 5">{{ $t('message.barterTips5') }}：{{ userInputMsg.refusal_reason }}</p>
              <p v-if="state === 7">{{ $t('message.barterTips7') }}：{{ userInputMsg.refusal_reason }}</p>
            </div>
            <div class="return-center">
              <!--<div class="refund">-->
                <!--<label>{{ $t('message.returnMoney') }}:</label>-->
                <!--<span>{{ $t('message.currencySymbol') }}{{ userInputMsg.refund }}</span><span>({{ $t('message.returnTips2') }})</span>-->
              <!--</div>-->
              <div class="return-cause margin-bottom-32">
                <label for="returnCause">{{ $t('message.barterCause') }}：</label>
                <span class="returns-comment">{{ userInputMsg.reason }}</span>
              </div>
              <div class="uploading margin-bottom-32">
                <label>{{ $t('message.uploadPhoto') }}:</label>
                <div class="all-content">
                  <div v-for="(item, index) in userInputMsg.image" class="upload-img" :style="{background: 'url(' + item + ') no-repeat center / contain'}" :key="index"></div>
                </div>
              </div>
              <div class="notice" v-if="state === 2">
                <!--<p>注意：若信息填写错误，请联系客服修改</p>-->
                  <p>{{ $t('message.notice') }}</p>
              </div>
              <!--判断是否超过7天，若超过，则不能重新申请换货-->
              <div class="apply-btn" v-if="userInputMsg.can_exchange  === 1">
                <button v-if="state === 5" @click="changeApply">{{ $t('message.changeApply') }}</button>
                <button v-if="state === 7" @click="changeApply">{{ $t('message.reApply') }}</button>
              </div>
            </div>
          </div>
          <div class="returns-content-left" v-if="state === 3">
            <div v-if="hasSupport === 1" class="returns-tips success">
              <!--<p>请在 <span style="color: #FF600A;">{{ orderCountDown }}</span> 内提交换货申请，逾期将视为放弃本次售后，如有问题请与客服协商</p>-->
              <p>{{ $t('message.barterApplyPass') }} <span style="color: #FF600A;">{{ orderCountDown }}</span> {{ $t('message.barterApplyTimeoutClose') }}</p>
            </div>
            <div v-if="hasSupport === 2 || hasSupport === 3" class="returns-tips">
              <!--<p>商品待回收，如有问题请与客服协商</p>-->
              <p>{{ $t('message.barterTips3') }}</p>
            </div>
            <div class="return-center">
              <div class="return-address" v-if="hasSupport === 1">
                <div class="address-title">{{ $t('message.barterMethods') }}</div>
                <div class="address-row">
                  <div>{{ $t('message.barterMethods') }}：</div>
                  <div class="choose-sort">
                    <!--<div :class="{active: nowActive === 'official'}" @click="chooseSort('official')">官方物流回收</div>-->
                    <div :class="{active: nowActive === 'official'}" @click="chooseSort('official')">{{ $t('message.official') }}</div>
                    <!--<div :class="{active: nowActive === 'user'}" @click="chooseSort('user')">用户自行寄回</div>-->
                    <div :class="{active: nowActive === 'user'}" @click="chooseSort('user')">{{ $t('message.userSendBack') }}</div>
                  </div>
                </div>
                <div v-show="nowActive === 'user'">
                  <div class="address-row">
                    <div>{{ $t('message.receiver') }}：</div>
                    <div>{{ targetAddress.name }}</div>
                  </div>
                  <div class="address-row">
                    <div>{{ $t('message.contactPhone') }}：</div>
                    <div>{{ targetAddress.phone }}</div>
                  </div>
                  <div class="address-row address-status">
                    <div>{{ $t('message.receiveAddress') }}：</div>
                    <div>{{ targetAddress.address }}</div>
                  </div>
                </div>
                <div class="last-row"></div>
              </div>
              <!--有输入框-->
              <div class="return-address" v-if="hasSupport === 1">
                <!--用户自行寄回-->
                <div v-show="nowActive === 'user'">
                  <div class="address-title">{{ $t('message.sendingInfo') }}</div>
                  <!--寄件人-->
                  <div class="address-row">
                    <div>{{ $t('message.sender') }}：</div>
                    <input type="text" :class="{'input-error': nameErrorStatus === 2}" :placeholder="this.$t('message.inputYourName')"  style="margin-left:14px" v-model='name'>
                  </div>
                  <div class="error-tips step-3" v-if="nameError">
                    {{ nameErrorText }}
                  </div>
                  <!--联系电话-->
                  <div class="address-row">
                    <div>{{ $t('message.contactPhone') }}：</div>
                    <input type="text" :class="{'input-error': phoneErrorStatus === 2}" :placeholder="this.$t('message.inputYourPhone')" v-model.trim='phone'>
                  </div>
                  <div class="error-tips step-3" v-if="phoneError">
                    {{ phoneErrorText }}
                  </div>
                  <!--物流公司-->
                  <div class="address-row">
                    <!--<div>物流公司：</div>-->
                    <div>{{ $t('message.expressCompany') }}：</div>
                    <!--<input type="text" :class="{'input-error': companyErrorStatus === 2}" placeholder="请输入物流公司" v-model='company'>-->
                    <input type="text" :class="{'input-error': companyErrorStatus === 2}" :placeholder="this.$t('message.inputExpressCompany')"  v-model='company'>
                  </div>
                  <div class="error-tips step-3" v-if="companyError">
                    {{ $t('message.inputTrueExpressCompany') }}
                  </div>
                  <!--快递单号-->
                  <div class="address-row">
                    <!--<div>快递单号：</div>-->
                    <div>{{ $t('message.expressNumber') }}：</div>
                    <!--<input type="text" :class="{'input-error': expressErrorStatus === 2}" placeholder="请输入快递单号" v-model='express'>-->
                    <input type="text" :class="{'input-error': expressErrorStatus === 2}" :placeholder="this.$t('message.inputExpressNumber')" v-model='express'>
                  </div>
                  <div class="error-tips step-3" v-if="expressError">
                    {{ $t('message.inputTrueExpressNumber') }}
                  </div>
                  <div class="apply-btn">
                    <button @click="supportInfo" :disabled="isDisabledSubInfo">{{ $t('message.submit') }}</button>
                  </div>
                </div>
                <!--官方物流回收-->
                <div v-show="nowActive === 'official'">
                  <div class="address-title">{{ $t('message.contactMsg') }}</div>
                  <!--寄件人-->
                  <div class="address-row">
                    <div>{{ $t('message.contactMan') }}：</div>
                    <input type="text" :class="{'input-error': nameOfficialErrorStatus === 2}" :placeholder="this.$t('message.inputContactManName')"  style="margin-left:14px" v-model='nameOfficial'>
                  </div>
                  <div class="error-tips step-3" v-if="nameOfficialError">
                    <!--{{ nameErrorText }}-->
                    <!--请输入正确的联系人姓名-->
                    {{ $t('message.inputTrueContactManName') }}
                  </div>
                  <!--联系电话-->
                  <div class="address-row">
                    <div>{{ $t('message.contactPhone') }}：</div>
                    <input type="text" :class="{'input-error': phoneOfficialErrorStatus === 2}" :placeholder="this.$t('message.inputContactPhone')" v-model.trim='phoneOfficial'>
                  </div>
                  <div class="error-tips step-3" v-if="phoneOfficialError">
                    <!--{{ phoneErrorText }}-->
                    <!--请输入正确的联系电话-->
                    {{ $t('message.inputTrueContactPhone') }}
                  </div>
                  <!--学校地址-->
                  <div class="address-row">
                    <!--<div>学校地址：</div>-->
                    <div>{{ $t('message.schoolAddress') }}：</div>
                    <!--<input type="text" :class="{'input-error': schoolErrorStatus === 2}" placeholder="请选择学校地址" v-model='school'>-->
                    <div class="defined-select">
                      <v-select :selections="schoolList" width="322px" height="46px" @on-change="getSchoolName"></v-select>
                    </div>
                  </div>
                  <!--回收日期-->
                  <div class="address-row">
                    <!--<div>回收日期：</div>-->
                    <div>{{ $t('message.recycleDate') }}：</div>
                    <div class="choose-sort recycle-date">
                      <!--<div :class="{active: nowDate === index, 'event-none': item.week === '7'}" @click="chooseDate(index, $event)" v-for="(item,index) in afterDate">-->
                        <div :class="{active: nowDate === index}" @click="chooseDate(index, $event)" v-for="(item, index) in afterDate" :key="index">
                        <p>{{ item.week | week}}</p>
                        <p>{{ item.date }}</p>
                      </div>
                    </div>
                  </div>
                  <div class="define-tips">
                    <p>{{ $t('message.officialExpressDateTip') }}</p>
                  </div>
                  <div class="apply-btn">
                    <button @click="officialExpress" :disabled="isDisabledSubInfoOfficial">{{ $t('message.submit') }}</button>
                  </div>
                </div>
              </div>
              <!--输入了用户名和联系电话-->
              <!--官方物流回收-->
              <div class="return-address" v-if="hasSupport === 2">
                <div class="address-title">{{ $t('message.barterMethods') }}</div>
                <div class="address-row">
                  <div>{{ $t('message.barterMethods') }}：</div>
                  <div style="margin-left:-6px">{{ $t('message.official') }}</div>
                </div>
                <div class="last-row"></div>
                <!--<div class="address-title">联系信息</div>-->
                <div class="address-title">{{ $t('message.contactMsg') }}</div>
                <div class="address-row">
                  <!--<div>联系人：</div>-->
                  <div>{{ $t('message.contactMan') }}：</div>
                  <div>{{officialInfo.contacts}}</div>
                </div>
                <div class="address-row">
                  <div>{{ $t('message.contactPhone') }}:</div>
                  <div>{{officialInfo.phone}}</div>
                </div>
                <div class="address-row">
                  <!--<div>学校地址：</div>-->
                  <div>{{ $t('message.schoolAddress') }}：</div>
                  <div>{{officialInfo.school}}</div>
                </div>
                <div class="address-row">
                  <!--<div>回收日期：</div>-->
                  <div>{{ $t('message.recycleDate') }}：</div>
                  <div>{{officialInfo.time}} {{officialInfo.week | week}}</div>
                </div>
                <div class="define-tips">
                  <!--<p style="margin: 0;">注意：若信息填写错误，请联系客服修改</p>-->
                  <p style="margin: 0;">{{ $t('message.notice') }}</p>
                </div>
              </div>
              <!--用户自行寄回-->
              <div class="return-address" v-if="hasSupport === 3">
                <div class="address-title">{{ $t('message.barterMethods') }}</div>
                <div class="address-row">
                  <div>{{ $t('message.barterMethods') }}：</div>
                  <div style="margin-left:-6px">{{ $t('message.userSendBack') }}</div>
                </div>
                <div class="address-row">
                  <div>{{ $t('message.receiver') }}：</div>
                  <div>{{ targetAddress.name }}</div>
                </div>
                <div class="address-row">
                  <div>{{ $t('message.contactPhone') }}：</div>
                  <div>{{ targetAddress.phone }}</div>
                </div>
                <div class="address-row address-status">
                  <div>{{ $t('message.receiveAddress') }}：</div>
                  <div>{{ targetAddress.address }}</div>
                </div>
                <div class="last-row"></div>
                <div class="address-title">{{ $t('message.mailMsg') }}</div>
                <div class="address-row">
                  <div>{{ $t('message.mailMan') }}：</div>
                  <div>{{userInputMsg.name}}</div>
                </div>
                <div class="address-row">
                  <div>{{ $t('message.contactPhone') }}:</div>
                  <div>{{userInputMsg.phone}}</div>
                </div>
                <div class="address-row">
                  <div>{{ $t('message.expressCompany') }}：</div>
                  <div>{{userInputMsg.courier_company}}</div>
                </div>
                <div class="address-row">
                  <div>{{ $t('message.expressNumber') }}：</div>
                  <div>{{userInputMsg.courier_number}}</div>
                </div>
                <div class="define-tips">
                  <p style="margin: 0;">{{ $t('message.notice') }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="returns-content-left" v-if="state === 4 || state === 6">
            <div class="returns-tips success">
              <p v-if="state === 4">{{ $t('message.barterTips4')}}</p>
              <p v-if="state === 6">{{ $t('message.returnTips9')}}</p>
            </div>
            <div class="return-center">
              <div class="return-address return-success">
                <div class="address-title">{{ $t('message.barterMsg')}}</div>
                <div class="address-row">
                  <div>{{ $t('message.barterCause')}}：</div>
                  <div>{{ userInputMsg.reason }}</div>
                </div>
                <div class="address-row">
                  <div>{{ $t('message.orderStatus')}}：</div>
                  <div>{{ userInputMsg.order_status }}</div>
                </div>
                <div class="address-row" v-if="state === 4">
                  <div>{{ $t('message.applyTime')}}：</div>
                  <div>{{ userInputMsg.ask_time * 1000 | date }}</div>
                </div>
                <div class="address-row" v-if="state === 6">
                  <div>{{ $t('message.accomplishTime')}}：</div>
                  <div>{{ userInputMsg.ask_time * 1000 | date }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="returns-content-right">
            <div class="right-item">
              <!--商品图-->
              <div class="product-item">
                <img :src="orderDetails.icon1"/>
              </div>
              <!--赠品图-->
              <template v-if="giftsExist">
                <!--  v-for="(item, index) in orderDetails.gives" :key="index" -->
                <div class="product-item product-item-gifts">
                  <img :src="orderDetails.gives[0].icon1"/>
                  <span>{{$t('message.nProductsInTotal1')}}{{orderDetails.gives.length + 1 || 'n'}}{{$t('message.nProductsInTotal2')}}</span>
                </div>
              </template>
              <!--商品信息-->
              <div class="product-item" v-else>
                <p class="product-information-title">{{ orderDetails.goods_name }}{{ orderDetails.yjsx_name }} {{ orderDetails.sxzh_name }}</p>
                <p class="product-information-label1">{{ $t('message.version') }}：{{ orderDetails.yjsx_name }}</p>
                <p class="product-information-label2">{{ $t('message.color') }}：{{ orderDetails.sxzh_name }}</p>
              </div>
            </div>
            <div class="right-item content-right-detail">
              <div class="right-item-row">
                <div class="row-left">{{ $t('message.orderNum') }}:</div>
                <div class="row-right">{{ orderDetails.order_number }}</div>
              </div>
              <div class="right-item-row">
                <div class="row-left">{{ $t('message.price') }}:</div>
                <div class="row-right">{{$t('message.currencySymbol')}}{{ orderDetails.base_price }}</div>
              </div>
              <div class="right-item-row" >
                <div class="row-left">{{ $tc('message.downPayment', 2) }}:</div>
                <div class="row-right">{{$t('message.currencySymbol')}}{{ orderDetails.down_payment }}</div>
              </div>
              <div class="right-item-row">
                <div class="row-left">{{ $t('message.freight') }}:</div>
                <div class="row-right">{{$t('message.currencySymbol')}}0.00</div>
              </div>
              <div class="right-item-row">
                <div class="row-left">{{ $t('message.hasPay') }}:</div>
                <div class="row-right">{{$t('message.currencySymbol')}}{{ orderDetails.down_payment }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-dialog v-if="showTips">
      <div class="tips-model">
        <img src="../../../assets/images/icon_success.png" alt="">
        <!--<div class="tips-text">换货申请提交成功！</div>-->
        <div class="tips-text">{{ $t('message.barterApplySubmitSuccess') }}</div>
        <div class="tips-text-small">{{second}}{{ $t('message.autoNext') }}</div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VBreadcrumb from '@/components/base/VBreadcrumb'
import VTitle from '@/components/base/VTitle'
import VProgressBar from '@/components/base/VProgressBar'
import VDialog from '@/components/base/VDialog'
import VSelect from '@/components/base/VSelect'

export default {
  name: 'PersonalOrderBarter',
  components: {
    TheHeaderTop,
    LogoBar,
    VBreadcrumb,
    VTitle,
    VProgressBar,
    VDialog,
    VSelect
  },
  data () {
    return {
      breadcrumb: [
        {
          name: this.$t('message.PersonalOrderLogisticsMyAccount'),
          path: '/personal'
        },
        {
          name: this.$t('message.PersonalOrderLogisticsMyOrder'),
          path: '/personal/order/0/1'
        },
        {
          name: this.$t('message.PersonalOrderSaleProgress')
        }
      ],
      nameErrorText: this.$t('message.nameError2'),
      phoneErrorText: this.$t('message.registerError4'),
      nameError: false,
      phoneError: false,
      txtTip: 0,
      returnsTxt: '',
      isShowSelectBtn: true,
      nowIndex: -1,
      uploadImages: [],
      showTips: false,
      second: 3,
      name: '',
      phone: '',
      hasSupport: 1, // 1为用户要输入物流等信息，2为用户选择了“官方物流回收”，3为用户选择了“用户自行寄回”
      inputStatus: 0,
      chooseStatus: 0,
      nameErrorStatus: 0,
      phoneErrorStatus: 0,
      orderDetails: {},
      userInputMsg: {},
      changeStep: 0,
      targetAddress: {},
      checkImgError: false,
      checkImgStatus: 0,
      getReturnsTxt: '',
      getUploadImages: [],
      giftsExist: false, // 是否有赠品
      loading: false,
      nowActive: 'official',
      companyErrorStatus: 0,
      companyError: false,
      company: '',
      expressErrorStatus: 0,
      expressError: false,
      express: '',
      // 官方物流回收的输入框
      nameOfficialErrorStatus: 0,
      nameOfficialError: false,
      nameOfficial: '',
      phoneOfficialErrorStatus: 0,
      phoneOfficialError: false,
      phoneOfficial: '',
      recycle: '',
      afterDate: [],
      nowDate: 0,
      schoolList: [],
      chooseSchoolName: '',
      officialInfo: {},
      orderCountDown: ''
    }
  },
  watch: {
    nameOfficial (val) {
      clearTimeout(this.nameOfficialTimer)
      this.nameOfficialTimer = setTimeout(() => {
        if (!/^\s*$/g.test(val)) {
          this.nameOfficialError = false
          this.nameOfficialErrorStatus = 1
        } else {
          this.nameOfficialError = true
          this.nameOfficialErrorStatus = 2
        }
      }, 900)
    },
    phoneOfficial (val) {
      clearTimeout(this.phoneOfficialTimer)
      this.phoneOfficialTimer = setTimeout(() => {
        if (/^[0][689]\d{8}$/.test(val)) {
          this.phoneOfficialError = false
          this.phoneOfficialErrorStatus = 1
        } else {
          this.phoneOfficialError = true
          this.phoneOfficialErrorStatus = 2
        }
      }, 900)
    },
    name (val) {
      clearTimeout(this.nameTimer)
      this.nameTimer = setTimeout(() => {
        if (!/^\s*$/g.test(val)) {
          this.nameError = false
          this.nameErrorStatus = 1
        } else {
          this.nameError = true
          this.nameErrorStatus = 2
        }
      }, 900)
    },
    phone (val) {
      clearTimeout(this.phoneTimer)
      this.phoneTimer = setTimeout(() => {
        if (/^[0][689]\d{8}$/.test(val)) {
          this.phoneError = false
          this.phoneErrorStatus = 1
        } else {
          this.phoneError = true
          this.phoneErrorStatus = 2
        }
      }, 900)
    },
    company (val) {
      clearTimeout(this.companyTimer)
      this.companyTimer = setTimeout(() => {
        if (!/^\s*$/g.test(val)) {
          this.companyError = false
          this.companyErrorStatus = 1
        } else {
          this.companyError = true
          this.companyErrorStatus = 2
        }
      }, 900)
    },
    express (val) {
      clearTimeout(this.expressTimer)
      this.expressTimer = setTimeout(() => {
        if (!/^\s*$/g.test(val)) {
          this.expressError = false
          this.expressErrorStatus = 1
        } else {
          this.expressError = true
          this.expressErrorStatus = 2
        }
      }, 900)
    },
    showTips (val) {
      if (val === true) {
        let t = setInterval(() => {
          this.second--
          if (this.second === -1) {
            clearInterval(t)
            this.showTips = false
            this.second = 3
            this.getOrderDetails()
          }
        }, 1000)
      }
    },
    returnsTxt (val) {
      this.txtTip = val.length
      if (val.length >= 10) {
        this.inputStatus = 1
      } else {
        this.inputStatus = 0
      }
    },
    uploadImages () {
      if (this.uploadImages.length > 4) {
        this.isShowSelectBtn = false
      } else {
        this.isShowSelectBtn = true
      }
      if (this.uploadImages.length >= 1) {
        this.chooseStatus = 1
      } else {
        this.chooseStatus = 0
      }
    }
  },
  computed: {
    checkImgErrorTxt () {
      switch (this.checkImgStatus) {
        case 2:
          return this.$t('message.small2m')
        case 3:
          return this.$t('message.onlyJpg')
      }
    },
    // 判断是否是换货完成后再次申请换货
    orderType () {
      if (this.$route.query.orderType === 'barterComplete' && this.orderDetails.order_status === 19) {
        return 1
      } else {
        return 2
      }
    },
    orderId () {
      return this.$route.query.orderId
    },
//      页面显示的第几步骤
    state () {
      if (this.orderDetails.order_status === 9 || this.changeStep === 1 || this.orderType === 1) { //订单交易完成显示第一步骤或者是换货申请审核不通过修改信息后显示第一步骤
        return 1
      } else if (this.orderDetails.order_status === 15) { // 第二步骤 申请换货
        return 2
      } else if (this.orderDetails.order_status === 16 || this.orderDetails.order_status === 20 || this.orderDetails.order_status === 22) { // 第三步骤 换货中
        return 3
      } else if (this.orderDetails.order_status === 17 || this.orderDetails.order_status === 23) { // 第四步骤 换货成功(商城重新发货)
        return 4
      } else if (this.orderDetails.order_status === 18) { // 换货失败
        return 5
      } else if (this.orderDetails.order_status === 19) { // 第五步骤 换货完成
        return 6
      } else if (this.orderDetails.order_status === 25) { // 换货订单超时,换货申请关闭
        return 7
      }
    },
    // 进度条的长度
    progressLength () {
      if ((this.orderDetails.order_status === 18 && this.changeStep === 0) || (this.orderDetails.order_status === 25 && this.changeStep === 0)) {
        return 3
      } else {
        return 5
      }
    },
    // 进度条的激活状态的长度
    progressState () {
      if (this.orderDetails.order_status === 9 || this.changeStep === 1 || this.orderType === 1) {
        return 1
      } else if (this.orderDetails.order_status === 15) {
        return 2
      } else if (this.orderDetails.order_status === 16 || this.orderDetails.order_status === 20 || this.orderDetails.order_status === 22) {
        return 3
      } else if (this.orderDetails.order_status === 17 || this.orderDetails.order_status === 23) {
        return 4
      } else if (this.orderDetails.order_status === 18 || this.orderDetails.order_status === 25) {
        return 0
      } else if (this.orderDetails.order_status === 19) {
        return 5
      }
    },
    // 步骤一的按钮能否点击
    isDisabledSubmit () {
      if (this.inputStatus === 1 && this.chooseStatus === 1) {
        return false
      } else {
        return true
      }
    },
    // 用户自行寄回
    isDisabledSubInfo () {
      // true 不能点击
      if (this.nameErrorStatus === 1 && this.phoneErrorStatus === 1 && this.companyErrorStatus === 1 && this.expressErrorStatus === 1) {
        return false
      } else {
        return true
      }
    },
    // 官方物流回收
    isDisabledSubInfoOfficial () {
      if (this.nameOfficialErrorStatus === 1 && this.phoneOfficialErrorStatus === 1) {
        return false
      } else {
        return true
      }
    }
  },
  activated () {
    this.changeStep = 0
    this.getOrderDetails()
  },
  methods: {
    changeApply () {
      this.changeStep = 1
      this.returnsTxt = this.getReturnsTxt
      this.uploadImages = this.getUploadImages
    },
    getSchoolName (val) {
      this.chooseSchoolName = val.name
    },
    chooseDate (val, e) {
      this.nowDate = val
    },
    // 选择换货方式
    chooseSort (val) {
      if (val === 'official') {
        this.nowActive = 'official'
      } else {
        this.nowActive = 'user'
      }
    },
    deleteImg (i) {
      this.uploadImages.splice(i, 1)
      this.nowIndex = -1
      this.isShowSelectBtn = true
    },
    // 用户自行寄回
    supportInfo () {
      this.$ajax.uploadMailMsg({
        id: this.orderId,
        name: this.name,
        phone: this.phone,
        type: 'order_exchange',
        courier_number: this.express,
        courier_company: this.company
      }).then(res => {
        if (res.code === 200) {
          this.getOrderDetails()
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.uploadSenderInfoFail')
          })
        } else if (res.code === 306) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.noThisOrder')
          })
        }
      })
    },
    // 页面加载时，执行此函数
    getOrderDetails () {
      this.giftsExist = false
      this.changeStep = 0
      document.documentElement.scrollTop = 40
      document.body.scrollTop = 40
      this.$ajax.orderDetails({
        id: this.orderId
      }).then((res) => {
        if (res.code === 200) {
          this.orderDetails = res.data
          // 判断赠品
          if (res.data.gives && res.data.gives.length !== 0) {
            this.giftsExist = true
          }
          // 15申请换货,第二步骤
          if (this.orderDetails.order_status === 15 || this.orderDetails.order_status === 17 || this.orderDetails.order_status === 18 || this.orderDetails.order_status === 19 || this.orderDetails.order_status === 23 || this.orderDetails.order_status === 25) {
            this.queryReturnsInfo()
          }
          if (this.orderDetails.order_status === 16) { // 状态16为 第三步骤要获取换货地址
            this.queryReturnsInfo()
            this.getReturnsAddress()
          }
          if (this.orderDetails.order_status === 20 || this.orderDetails.order_status === 22) {
            this.hasSupport = 2
            this.getOfficialExpressInfo()
          }
        } else if (res.code === 202) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.requestDataFailed')
          })
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    },
    submitReturnApply () {
      // this.getReturnsTxt = this.returnsTxt
      // this.getUploadImages = this.uploadImages
      if (this.loading) {
        return
      }
      if (this.orderDetails.order_status === 9) { // 点击第一步提交申请按钮时执行此函数
        this.$ajax.applyBarter({
          id: this.orderId,
          reason: this.returnsTxt,
          imageArr: this.uploadImages
        }).then((res) => {
          if (res.code === 200) {
            this.showTips = true
          } else if (res.code === 202) {
            this.$store.commit('alert', {
              switch: true,
              alertText: this.$t('message.applyBarterFail')
            })
          } else if (res.code === 305) {
            this.$store.commit('alert', {
              switch: true,
              alertText: this.$t('message.uploadImgFormatErr')
            })
          } else if (res.code === 306) {
            this.$store.commit('alert', {
              switch: true,
              alertText: this.$t('message.noThisOrder')
            })
          }
        })
      } else if (this.orderDetails.order_status === 18 || this.orderDetails.order_status === 25 || this.orderDetails.order_status === 19) {    // 点击换货申请审核不通过按钮时执行此函数
        this.$ajax.modifyBarterMsg({
          id: this.orderId,
          reason: this.returnsTxt,
          imageArr: this.uploadImages
        }).then((res) => {
          if (res.code === 200) {
            this.showTips = true
          } else if (res.code === 202) {
            this.$store.commit('alert', {
              switch: true,
              alertText: this.$t('message.requestDataFailed')
            })
          } else if (res.code === 301) {
            this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
          } else if (res.code === 305) {
            this.$store.commit('alert', {
              switch: true,
              alertText: this.$t('message.uploadImgFormatErr')
            })
          } else if (res.code === 306) {
            this.$store.commit('alert', {
              switch: true,
              alertText: this.$t('message.noThisOrder')
            })
          }
        })
      }
    },
    // 获取官方物流信息
    getOfficialExpressInfo () {
      this.$ajax.officialExpressInfo({
        order_num_md5: this.orderId
      }).then(res => {
        if (res.code === 200) {
          this.officialInfo = res.data
        } else if (res.code === 211) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.lackMustParam')
          })
        }
      })
    },
    // 获取第三步页面的换货地址
    getReturnsAddress () {
      this.$ajax.getReturnsAddress().then((res) => {
        if (res.code === 200) {
          this.targetAddress = res.data
        } else {
          console.log('获取地址失败')
        }
      })
    },
    // 获取第三步页面的学校地址
    getSchoolAddress () {
      let languageType
      let t = window.localStorage.getItem('thaiPayMallLanguage')
      if (t) {
        if (t === 'cn') {
          languageType = 1
        } else if (t === 'en') {
          languageType = 3
        } else {
          languageType = 2
        }
      } else {
        languageType = 2
      }
      this.$ajax.getLimitSchool(languageType).then(res => {
        if (res.code === 200) {
          this.schoolList = res.data
          this.chooseSchoolName = res.data[0].name
        } else {
          console.log('获取地址失败')
        }
      })
    },
    // 获取第三步骤回收日期
    recycleDate () {
      let d = new Date().toLocaleDateString()
      // 获取未来2天的日期
      this.$ajax.getTwoDays({date: d}).then((res) => {
        this.afterDate = res.data
        /* if (this.afterDate[0].week === '7') {
          this.nowDate = 1
        } */
      })
    },
    // 换货第二步的页面信息、第三步页面信息、第四步骤页面信息、第五步骤页面信息、换货失败页面信息 执行此函数
    queryReturnsInfo () {
      let languageType
      let t = window.localStorage.getItem('thaiPayMallLanguage')
      if (t) {
        if (t === 'cn') {
          languageType = 1
        } else if (t === 'en') {
          languageType = 3
        } else {
          languageType = 2
        }
      } else {
        languageType = 2
      }
      this.$ajax.requestBarterInfo({
        id: this.orderId,
        type: languageType
      }).then((res) => {
        if (res.code === 200) {
          this.userInputMsg = res.data
          // 判断是否是换货失败
          if (this.orderDetails.order_status === 18 || this.orderDetails.order_status === 25) {
            this.getReturnsTxt = res.data.reason
            this.getUploadImages = res.data.image
          }
          //  判断是否是步骤三
          if (this.orderDetails.order_status === 16) {
            //  判断步骤三的哪个状态
            if (this.userInputMsg.name === '' || this.userInputMsg.name === null) {
              this.hasSupport = 1
              this.getCountDown()
              this.getSchoolAddress()
              this.recycleDate()
            } else {
              this.hasSupport = 3
            }
          }
        } else if (res.code === 306) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.noThisOrder')
          })
        } else if (res.code === 307) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.noThisBarterInfo')
          })
        }
      }).catch(() => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    // 获取倒计时关闭时间
    getCountDown () {
      this.$ajax.countDown({
        type: 1,
        id: this.orderId
      }).then(res => {
        if (res.code === 200) {
          let t = res.data.time
          this.countDownTimer = setInterval(() => {
            t--
            if (t <= 0) {
              clearInterval(this.countDownTimer)
            }
            let h = parseInt(t / 3600)
            if (h < 10) {
              h = '0' + h
            }
            let m = parseInt((t - h * 3600) / 60)
            if (m < 10) {
              m = '0' + m
            }
            let s = (t - h * 3600) - 60 * m
            if (s < 10 && s > 0) {
              s = '0' + s
            } else if (s <= 0) {
              s = '00'
            }
            // this.orderCountDown = h + '时' + m + '分' + s + '秒'
            this.orderCountDown = h + this.$t('message.Hour') + m + this.$t('message.minute') + s + this.$t('message.second')
          }, 1000)
        } else if (res.code === 211) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.lackMustParam')
          })
        }
      }).catch(() => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    // 官方物流回收
    officialExpress () {
      this.$ajax.officialExpress({
        order_num_md5: this.orderId,
        contacts: this.nameOfficial,
        phone: this.phoneOfficial,
        school: this.chooseSchoolName,
        time: this.afterDate[this.nowDate].date,
        type: 1
      }).then((res) => {
        if (res.code === 200) {
          this.getOrderDetails()
        } else if (res.code === 211) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.lackMustParam')
          })
        } else if (res.code === 320) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.noThisOrder')
          })
        } else if (res.code === 221) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.dataSubmitAgain')
          })
        } else if (res.code === 4999) {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.operationDataFail')
          })
        }
      }).catch(() => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    triggerUpload () {
      if (!this.loading) {
        this.$refs.uploadFile.click()
      }
    },
    showImageCover (i) {
      this.nowIndex = i
    },
    hideImageCover (i) {
      this.nowIndex = -1
    },
    // 上传图片
    onFileChange (e) {
      let files = e.target.files[0] || e.DataTransfer.files[0]
      if (files.length === 0) {
        return
      } else {
        let n = files.type.split('/')
        if (n[1] === 'jpg' || n[1] === 'jpeg' || n[1] === 'png') {
          this.checkImgStatus = 1
          this.checkImgError = false
        } else {
          this.checkImgStatus = 3
          this.checkImgError = true
          return
        }
        this.param = new window.FormData()
        this.param.append('file', files, files.name)
        this.loading = true
        this.$ajax.uploadImg(this.param).then((res) => {
          if (res.code === 200) {
            let image = new Image()
            image.onload = () => {
              this.loading = false
              this.uploadImages.push(res.data.file)
              if (this.uploadImages.length > 4) {
                this.isShowSelectBtn = false
              }
            }
            image.src = res.data.file
          } else {
            console.log('上传失败')
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.barter-container {
  min-width: 1200px;
  background: #f5f5f5;
  padding-bottom: 40px;
}

.logistics-body {
  width: 1200px;
  margin: 20px auto 0;
}

  .event-none {
    color: #A5A5A5!important;
    pointer-events: none;
  }
  .define-tips p {
    margin-left: 86px;
    font-size: 12px;
    color: #A5A5A5;
  }
  .margin-bottom-32 {
    margin-bottom: 32px;
  }
  .dialog-content {

  }
  .each-date {
    border: 1px solid #000;
  }
  .dialog-tip {
    width: 532px;
    height: 381px;
    background: white;
  }

  .dialog-title {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    text-align: center;
  }

  .dialog-btn-group {
    height: 46px;
    margin-top: 60px;
    font-size: 0;
  }

  .margin-left {
    margin-left: 40px;
  }
  .choose-sort {
    font-size: 0;
  }
  .choose-sort > div {
    text-align: center;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    padding: 10px 15px;
    display: inline-block;
    font-size: 14px;
    margin-right: 16px;
  }
  .recycle-date > div {
    text-align: center;
    font-size: 12px;
    padding: 8px 30px;
  }
  .choose-sort > div:hover {
    border: 1px solid #FF600A;
    cursor: pointer;
  }
  .choose-sort .active {
    border: 1px solid red;
    background: url(../../../assets/images/icon_check.png) no-repeat top right;
  }
  .padding-top-40 {
    padding-top: 16px;
  }
  ::-webkit-input-placeholder {
    font-size: 12px;
  }

  ::-moz-placeholder {
    font-size: 12px;
  }

  /* firefox 19+ */
  :-ms-input-placeholder {
    font-size: 12px;
  }

  /* ie */
  input:-moz-placeholder {
    font-size: 12px;
  }

  .wrapContent {
    margin-top: 20px;
    box-sizing: border-box;
    min-height: 500px;
    padding: 40px;
    background: #fff;
  }

  .returns-info {
    margin-top: 60px;
  }

  .step-list {
    margin-top: 13px;
  }

  .step-list ul {
    height: 25px;
    width: 1000px;
    margin: 0 auto;
    position: relative;
  }

  .step-list li {
    font-size: 16px;
    color: #717171;
    text-align: center;
    float: left;
    width: 200px;
  }

  .returns-content {
    margin-top: 60px;
    overflow: hidden;
  }

  .returns-content-left {
    float: left;
    width: 734px;
  }

  .returns-content-right{
    float: left;
    width: 345px;
    margin-left: 40px;
    border-left: 1px solid #e6e6e6;
    height: 300px;
  }

  .tips-model{
    width: 480px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    text-align: center;
    padding: 60px 0;

  }
  .upload-img{
    width: 80px;
    height: 80px;
    margin-right: 14px;
    margin-bottom: 12px;
  }
  .tips-model img{
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
  }
  .tips-text{
    font-size: 24px;
    color: #333333;
    line-height: 26px;
    margin-bottom: 12px;
  }
  .tips-text-small{
    font-size: 14px;
    color: #747474;
    letter-spacing: 0;
  }
  .error-tips {
    margin-left: 80px;
  }
  .step-3 {
    margin-left: 90px;
    margin-top: -12px;
    margin-bottom: 24px;
  }
  .returns-tips {
    box-sizing: border-box;
    position: relative;
    margin-bottom: 60px;
    width: 732px;
    padding: 22px 24px 22px 56px;
    border: 1px solid #FF600A;
    background: #FFFDF4 url("../../../assets/images/icon_errorTips.png") no-repeat 24px 24px;
  }

  .returns-tips p {
    font-size: 14px;
    color: #333333;
    line-height: 22px;
  }

  .success {
    border : 1px solid #24c668;
    background: #FAFFFC url("../../../assets/images/findpwd/icon_success_28px.png") no-repeat 24px 24px;
    background-size: 16px 16px;
  }
  .return-center label {
    font-size: 14px;
    color: #333333;
    margin-right: 16px;
  }


  .refund span:nth-of-type(1) {
    font-size: 16px;
    color: #FF600A;
  }

  .refund span:nth-of-type(2) {
    font-size: 14px;
    color: #A5A5A5;
    margin-left: 8px;
  }
  .return-cause {
    position: relative;
  }

  .return-cause label {
    vertical-align: top;
  }

/*  .return-cause .text-wrap {
    width: 460px;
    height: 160px;
    position: relative;
    left: 65px;
    top: -20px;
    display: inline-block;
    border: 1px solid #000;
  }*/

  .return-cause textarea {
    box-sizing: border-box;
    width: 460px;
    height: 160px;
    border: 1px solid #E0E0E0;
    resize: none;
    padding: 16px;
    font-size: 14px;
    color: #666666;
    /*position: relative;*/
    /*top: -20px;*/
    /*left: 64px;*/
  }
  .return-cause .txtTip {
    display: inline-block;
    color: #a5a5a5;
    font-size: 12px;
    position: absolute;
    top: 168px;
    right: 197px;
    margin-bottom: 16px;
  }
  .return-cause .warnTxt {
    color: #FF3535;
  }
  .return-cause .returns-comment {
    color: #666666;
  }

  .apply-btn {
    margin-top: 40px;
    margin-bottom: 0!important;
  }
  .apply-btn button {
    padding: 12px 33px;
    background: #FF600A;
    border: none;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
    margin-left: 88px;
    min-width: 130px;
    line-height: 22px;
  }
  .apply-btn button:hover {
    background-color: #ff3c00;
  }

  .apply-btn button:disabled {
    background: #d7d7d7;
    cursor: not-allowed;
  }

  .all-content > .upload-img {
    border: 1px dashed #EBEBEB;
  }
  .uploading label {
    vertical-align: top;
  }

  .returns-upload-loading {
    width: 80px;
    height: 80px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    margin-right: 19px;
    margin-bottom: 26px;
    background: url(../../../assets/images/upload_loading.gif) no-repeat center;
  }

  /*文件上传样式*/
  .all-content {
    display: inline-block;
  }

  .all-content:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
  }

  .all-content > div {
    /*display: inline-block;*/
    float: left;
  }

  .returns-upload-btn {
    width: 80px;
    height: 80px;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    box-sizing: border-box;
    position: relative;
  }
  .all-content-upload p {
    /*position: relative;*/
    /*top: 13px;*/
    margin-top: 13px;
    font-size: 12px;
    color: #A5A5A5;
    text-align: center;
  }
  .returns-upload-plus {
    width: 78px;
    height: 78px;
    cursor: pointer;
  }

  .add-row-icon, .add-column-icon {
    background: #E0E0E0;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .add-row-icon {
    width: 24px;
    height: 2px;
  }

  .add-column-icon {
    width: 2px;
    height: 24px;
  }

  .returns-upload-image {
    width: 78px;
    height: 78px;
    border: 1px solid #E0E0E0;
    position: relative;
    margin-right: 19px;
    margin-bottom: 26px;
  }

  .returns-upload-image div:last-child {
    position: absolute;
    top: -13px;
    right: -13px;
    cursor: pointer;
  }
  .product-item {
    display: table-cell;
    vertical-align: middle;
    height: 20px;
    line-height: 20px;
    color: #333;
  }
  .product-item:nth-of-type(2) {
    padding-left: 30px;
  }
  .product-item img{
    width: 90px;
    height: 90px;
  }
  .product-item > p {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .product-information-title {
    line-height: 20px;
    width: 180px;
    font-size: 14px;
    color: #333333;
  }

  .product-information-label1 {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    font-size: 12px;
    color: #666666;
  }

  .product-information-label2 {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }
  .right-item{
    padding-left: 30px;
  }
  .content-right-detail{
    margin-top: 32px;
  }
  .right-item-row{
    margin-top: 16px;
  }
  .right-item-row div {
    display: inline-block;
    vertical-align: middle;
  }
  .row-left{
    font-size: 14px;
    color: #A5A5A5;
    width: 125px;
    /*width: 57px;*/
    overflow: hidden;
  }

  .row-right{
    font-size: 14px;
    color: #333333;
  }
  .address-row{
    font-size: 14px;
    color: #333333;
    margin-bottom: 24px;

  }
  .address-row > div {
    display: inline-block;
    vertical-align: middle;
  }
  .address-row input{
    width: 342px;
    height: 46px;
    padding: 0 16px;
    font-size: 14px;
    color: #666;
    border: 1px solid #e0e0e0;
  }
  .address-row > div:first-child{
    font-size: 14px;
    color: #666666;
    margin-right: 16px;
  }
  .address-row > div:last-child {
    width: 368px;
  }
  .address-row > div.defined-select {
    box-sizing: border-box;
    width: 376px;
  }
  .address-status > div:first-child {
    vertical-align: top;
  }
  .address-title{
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 24px;
  }
  .return-center .return-success{
    margin-bottom: 136px;
  }
  .last-row {
    width: 465px;
    border-bottom: 1px solid #e6e6e6;
    margin: 40px 0 40px 0;
  }
  .product-item-gifts {
    padding-left: 20px !important;
  }

  .product-item-gifts span {
    padding-left: 16px;
  }
  .notice {
    margin-top: -20px;
    margin-bottom: 58px!important;
  }
  .notice p {
    font-size: 13px;
    color: #A5A5A5;
  }
</style>
